<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <h3>产品信息</h3>
          <template>
            <div slot="header" class="clearfix">
              <el-form :inline="true" :model="product">
                <el-form-item>
                  <el-input
                    v-model="product.productName"
                    placeholder="产品名称"
                    :clearable="true"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-select
                    v-model="product.productTypeId"
                    placeholder="请选择产品类型"
                  >
                    <el-option
                      :label="item.productTypeName"
                      :value="item.productTypeId"
                      v-for="(item, index) in productType"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="search"
                    ><i class="el-icon-search"></i
                  ></el-button>
                  <el-button type="primary" round @click="productInfo"
                    >产品类别占比</el-button
                  >
                  <el-button type="success" @click="exportExcel"
                    >产品导出</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <!-- 产品展示表格 -->
            <el-table :data="productList" stripe style="width: 100%">
              <el-table-column prop="productName" label="产品名称" width="180">
              </el-table-column>
              <el-table-column prop="productDesc" label="产品简介" width="210">
              </el-table-column>
              <el-table-column
                prop="productAmount"
                label="贷款额度（元）"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="productTypeName"
                label="产品类型"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="averageName" label="还款方式" width="150">
              </el-table-column>
              <el-table-column prop="productFlag" label="产品状态" width="150">
              </el-table-column>
              <el-table-column
                prop="productLabelFlag"
                label="产品标签"
                width="150"
              >
              </el-table-column>
              <el-table-column prop="address" label="操作" width="280">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    @click="
                      app(
                        scope.row.productAmount,
                        scope.row.averageName,
                        scope.row.productTypeName,
                        scope.row.productId
                      )
                    "
                    >申请</el-button
                  >
                  <el-button type="warning" @click="delDeBit()">撤销</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div></el-col
      ></el-row
    >
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="pageInfo.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <el-dialog
      title="提示"
      :visible.sync="dialog.allpyShow"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="ApplyForm" label-width="100px" size="medium">
        <el-form-item label="申请人">
          <el-input v-model="ApplyForm.diName"></el-input>
        </el-form-item>
        <el-form-item label="申请人电话">
          <el-input v-model="ApplyForm.diPhone"></el-input>
        </el-form-item>
        <el-form-item label="申请产品金额">
          <el-input v-model="ApplyForm.diAppMoney"></el-input>
        </el-form-item>
        <el-form-item label="申请产品类型">
          <el-input v-model="ApplyForm.diDebitType"></el-input>
        </el-form-item>
        <el-form-item label="还款方式">
          <el-input v-model="ApplyForm.diPayMethod"></el-input>
        </el-form-item>
        <el-form-item label="借款期数">
          <el-input v-model="ApplyForm.diTimeLimit"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.allpyShow = false">取 消</el-button>
        <el-button type="primary" @click="routTijiao()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ApplyForm: {},
      dialog: {
        allpyShow: false,
      },
      productList: [],
      product: {
        productName: "",
      },
      productType: [],
      pageInfo: {
        pageSizes: [5, 10, 20, 50],
        total: 1,
      },
      query: {
        currentPage: 1,
        pageSize: 5,
      },
    };
  },
  methods: {
    exportExcel() {
      this.$axios
        .post("/products/exportExcel", this.query, { responseType: "blob" })
        .then((res) => {
          let fileName = res.headers["content-disposition"].split("=")[1];
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let dom = document.createElement("a");
          dom.style.display = "none";
          dom.href = url;
          dom.setAttribute("download", fileName);
          document.body.appendChild(dom);
          dom.click();
          dom.parentNode.removeChild(dom);
          window.URL.revokeObjectURL(dom.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    delDeBit() {
      this.$message.success("请联系工作人员处理");
    },
    routTijiao() {
      this.dialog.allpyShow = false;
      this.$axios.post("/debits", this.ApplyForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("申请成功,请继续填写详细信息，等待审核");
        }
      });
      this.$router.push("/apply");
    },
    app(money, method, type, id) {
      this.dialog.allpyShow = true;
      this.ApplyForm.diAppMoney = money;
      this.ApplyForm.diPayMethod = method;
      this.ApplyForm.diDebitType = type;
      this.ApplyForm.productId = id;
    },
    selectProductType() {
      this.$axios.get("/productTypes").then((res) => {
        this.productType = res.data.data.productType;
      });
    },

    selectAllProducts() {
      this.$axios.post("/products", this.query).then((res) => {
        this.productList = res.data.data.products;
        this.pageInfo.total = res.data.data.total;
      });
    },
    search() {
      this.$axios.post("/products/nameLike", this.product).then((res) => {
        this.productList = res.data.data.productList;
      });
    },

    handleCurrentChange(currentPage) {
      this.query.currentPage = currentPage;
      this.selectAllProducts();
    },

    handleSizeChange(size) {
      this.query.pageSize = size;
      this.selectAllProducts();
    },

    productInfo() {
      this.$router.push("/productEcharts");
    },
  },
  mounted() {
    this.selectAllProducts();
    this.selectProductType();
  },
};
</script>